<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .hidden{
      position: absolute;
      left: 0px;
      top: 0px;
      width: 500px;
      height: 500px;
      background-color: rgba(255,0,0,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      visibility: hidden;
    }
  </style>
  <script src="student.js"></script>

  <script>
    function $(id){
      return document.getElementById(id);
    }

    window.onload = function (){
        fullTable(studentArray);
    }

    /**
     * 填充表格数据
     */
    function fullTable(studentArray){
       let str = "";
       studentArray.forEach(n => {
         str += `<tr><td>${n.code}</td><td>${n.name}</td><td>${n.age}</td>
                <td><input type="button" value="删除" onclick="del(${n.code})">
                <input type="button" value="修改" onclick="showUpdateDiv(${n.code})">
                </td>
            </tr>`;
       });
       $("data").innerHTML = str;
    }

    /**
     * 按姓名查找
     */
    function findByName(){
      var arr = studentArray.filter(n => n.name.indexOf($("name").value) != -1);
      fullTable(arr);
    }

    /**
     * 显示添加遮罩
     */
    function showAddDiv(){
      $("addDiv").style.visibility = "visible";
      $("addDiv").style.width = document.documentElement.clientWidth+"px";
      $("addDiv").style.height = document.documentElement.clientHeight+"px";

    }

    /**
     * 添加学生
     */
    function addStudent(){
      //将文本框内容创建学生对象
      var obj = {"code":$("scode").value,"name":$("sname").value,"age":$("sage").value};
      //在数组中添加学生
      studentArray.push(obj);
      fullTable(studentArray);
      $("addDiv").style.visibility = "hidden";
    }

    /**
     * 删除学生
     * @param code 学生学号
     */
    function del(code){
      //得到学号对应的下标
      let index = studentArray.findIndex(n => n.code == code);
      //删除指定下标的元素
      studentArray.splice(index,1);
      fullTable(studentArray);
    }

    /**
     * 显示修改div
     * @param code 要修改学生的学号
     */
    function showUpdateDiv(code){
      //查找指定学号对应学生对象
      var obj = studentArray.find(n => n.code== code);
      $("codeSpan").innerHTML = obj.code;
      $("nameSpan").innerHTML = obj.name;
      $("uage").value = obj.age;

      $("updateDiv").style.visibility = "visible";
      $("updateDiv").style.width = document.documentElement.clientWidth+"px";
      $("updateDiv").style.height = document.documentElement.clientHeight+"px";
    }

    /**
     * 修改学生信息
     */
    function updateStudent(){
      //找到指定学号对应的对象
      var obj = studentArray.find(n => n.code == $("codeSpan").innerHTML);
      obj.age = $("uage").value;
      fullTable(studentArray);
      $("updateDiv").style.visibility = "hidden";
    }
  </script>
</head>
<body>
  <table border="1" width="60%" cellspacing="0">
    <thead>
      <tr><th>学号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
    </thead>

    <tbody id="data"></tbody>

  </table>
  姓名：<input type="text" id="name"><br>
  <input type="button" value="查找" onclick="findByName()">
  <div>
    <input type="button" value="添加" onclick="showAddDiv()">
  </div>

  <div id="addDiv" class="hidden" >
    <div style="width: 300px;height: 300px;background-color: white">
       学号:<input type="text" id="scode"><br>
       姓名：<input type="text" id="sname"><br>
       年龄：<input type="text" id="sage"><br>
        <input type="button" value="添加" onclick="addStudent()">
    </div>
  </div>

  <div id="updateDiv" class="hidden" >
    <div style="width: 300px;height: 300px;background-color: white">
      学号:<span id="codeSpan"></span><br>
      姓名：<span id="nameSpan"></span><br>
      年龄：<input type="text" id="uage"><br>
      <input type="button" value="修改" onclick="updateStudent()">
    </div>
  </div>
</body>
</html>
